<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="u-flex-col u-col-center">

				<Coupon :item='item' :islast='index + 1 == codeList.length' v-for="(item , index) in codeList"
					:key='index'></Coupon>
			</view>
		</mescroll-body>

		<view class="exchange_button u-flex-col u-col-center u-row-center" @click="open_exchange">
			<text class="exchange_button_text">点此</text>
			<text class="exchange_button_text">兑换</text>
		</view>

		<u-popup v-model="popup_show" mode="center" border-radius="20">
			<view class="popup_center u-flex-col u-padding-30">
				<text class="popup_title u-margin-bottom-40">兑换</text>
				<view class="u-flex money_input u-margin-bottom-40">
					<text>兑换码：</text>
					<u-input v-model="code" type='number' focus trim placeholder="请输入兑换码" />
				</view>
				<!-- @click="apply" -->
				<view class="codeExchange_button" @click="codeExchange">
					兑换
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- <l-painter ref="painter" isRenderImage custom-style="position: fixed; left: 200%;" :board="base" @success="path = $event" /> -->
	</view>
</template>

<script>
	// import base from './base.js';
	import Coupon from '@/components/coupon/index.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		onLoad() {
		},
		
		data() {
			return {
				// isShowPopup: true,
				// path: '',
				// base: base,
				code: '', // 兑换码
				popup_show: false,
				codeList: [], // 兑换券列表
				downOption: {
					auto: false,
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		methods: {
			onRender() {
				// 支持通过调用render传入参数
				// const painter = this.$refs.painter
				// painter.render(this.base)
				// console.log(this.base);
			},
			// saveImage() {
			// 	uni.saveImageToPhotosAlbum({
			// 		filePath: this.path,
			// 		success(res) {
			// 			uni.showToast({
			// 				title: '已保存到相册',
			// 				icon: 'success',
			// 				duration: 2000
			// 			})
			// 		}
			// 	})
			// },
			codeExchange() {
				if (this.code.length == 0) {
					this.$refs.uToast.show({
						title: `请输入兑换码`,
						type: 'warning',
						position: 'bottom',
					})
					return false;
				};
				this.$u.api.codeExchange({
					code: this.code,
				}).then(res => {
					this.$refs.uToast.show({
						title: `${res.msg}`,
						type: 'warning',
						position: 'bottom',
						icon: false,
					});
					this.code = '';
					this.popup_show = false;
				})
			},
			open_exchange() {
				this.popup_show = true;
				uni.getClipboardData({
					success: res => {
						this.code = res.data
					}
				});
			},
			downCallback() {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
				// 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }

				let pageNum = page.num; // 页码, 默认从1开始

				this.$u.api.codeList({
					page: pageNum,
				}).then(res => {
					if (pageNum == 1) {
						this.codeList = [];
					};
					this.codeList = this.codeList.concat(res.list);
					this.mescroll.endBySize(this.codeList.length, res.count);
				})
				// let pageSize = page.size; // 页长, 默认每页10条

				// 接口返回的当前页数据列表 (数组)
				// let curPageData = data.xxx;
				// let curPageLen = curPageData.length; 
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)

				//设置列表数据
				// if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				// this.dataList = this.dataList.concat(curPageData); //追加新数据
				// let totalSize = data.xxx;
				// let curPageLen =  
				// this.mescroll.endBySize(curPageLen, totalSize); 
			}
		},
		components: {
			Coupon
		}
	}
</script>

<style lang="scss" scoped>
	.codeExchange_button {
		background-color: rgb(73, 154, 201);
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		font-weight: 700;
		border-radius: 10rpx;
	}

	.exchange_button {
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		box-shadow: 0rpx 0rpx 14rpx 0rpx #999;
		// background-color: rgba(73, 154, 201 , .4);
		background-color: #A0CFFF;
	}

	.exchange_button_text {
		font-weight: 700;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.popup_title {
		font-weight: 700;
		font-size: 32rpx;
		color: #000;
	}

	.popup_center {
		width: 600rpx;
	}

	.money_input {
		border-bottom: solid 2rpx #eee;
	}
</style>
